<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description
		for your new site here. You can edit this line in _config.yml.
		It will appear in your document head meta (for Google search results)
		and in your feed.xml site description.
		">
    <title>支付</title>

    <link rel="stylesheet" href="../css/weui-v0.4.3.css">
    <link rel="stylesheet" href="../css/weui2.css">
    <script src="../lib/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        var signature = "";
        var ticket = "";
        window.onload = function () {
            $.ajax({
                url: "/wx/getTicket",
                method: "get",
                success: function (res) {
                    if (res.status === 1) {
                        ticket = res.data;
                        let url = window.location.href;
                        $.ajax({
                            url: "/wx/getSignature?ticket=" + ticket + "&url=" + url,
                            method: "get",
                            success: function (res) {
                                if (res.status === 1) {
                                    signature = res.data;
                                } else {
                                    alert(res.msg)
                                }
                            }
                        })
                    } else {
                        alert(res.msg)
                    }
                }
            })

        }
    </script>
</head>
<body ontouchstart style="background-color: white;">
<div style="margin: 30% 3%;margin: 30% 3%;border: 1px #eee dashed;">
    <div class="weui-pay" style="padding: 1em;">
        <h1 class="weui-payselect-title">${eventName}报名费</h1>
        <p class="weui-pay-num" id="price"></p>
        <ul class="weui-pay-u">
            <li>
                <span class="title">组别</span>
                <span class="content" id="groupName"</span>
            </li>
            <li>
                <span class="title">套餐</span>
                <span class="content" id="eventPriceName"></span>
            </li>

        </ul>
        <div class="pay-div">
            <a href="javascript:;" class="weui_btn weui_btn_primary" id="pay">立即支付</a>
        </div>
    </div>
</div>
<script>

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }


    let pibId = "";
    let raceId = getQueryVariable("raceId");
    let eventPriceId = "";
    let price = 0;
    let eventId = "";

    //todo  获取openId
    let openId = window.sessionStorage.getItem("openid");
    let name = "";
    let personal_mobile = "";
    let event_info_name = "";
    let event_info_begin_time = "";
    let event_info_place = "";
    let participant_code = "";
    $.ajax({
        url: "/part2/getPage2Info?raceId=" + raceId,
        method: "get",
        dataType: "json",
        async: false,
        contentType: "application/json",
        success: function (res) {
            console.log(res)
            if (res.status == 1) {
                let data = res.data;
                $("#groupName").text(data.groupName)
                $("#price").text("¥ " + data.price)
                $("#eventPriceName").text(data.eventPriceName)
                $("#roleName").text(data.roleName)

                eventId = data.eventId
                pibId = data.pibId
                eventPriceId = data.eventPriceId
                console.log(eventId)
                price = data.price
                name = data.name;
                personal_mobile = data.personal_mobile;
                event_info_name = data.event_info_name;
                event_info_begin_time = data.event_info_begin_time;
                event_info_place = data.event_info_place;
                participant_code = data.participant_code;
            }

        }
    })


    $("#pay").click(function () {

        //todo pay
        if (price == 0 ){
            $.ajax({
                url: "/participant/pay/zero",
                method: "post",
                dataType: "json",
                async: false,
                contentType: "application/json",
                data: JSON.stringify({
                    "pib": pibId,
                    "eventPriceId": eventPriceId,
                    "tradeType": 1,
                    "openId": openId
                }),
                success: function (res) {
                    console.log(res);
                    let param = res.data;
                    if (res.status === 1) {
                        window.location.href = "/event${eventId}/success.html"
                    }
                    else {
                        window.location.href = "/event${eventId}/failed.html"
                    }
                }
            })
        } else {
            //金额不为0的
            $.ajax({
                url: "/participant/wxpay",
                method: "post",
                dataType: "json",
                async: false,
                contentType: "application/json",
                data: JSON.stringify({
                    "pib": pibId,
                    "eventPriceId": eventPriceId,
                    "tradeType": 1,
                    "openId": openId
                }),
                success: function (res) {
                    console.log(res);
                    let param = res.data;
                    if (res.status === 1) {
                        function onBridgeReady() {
                            WeixinJSBridge.invoke(
                                    'getBrandWCPayRequest', {
                                        "appId": param.appId,     //公众号名称，由商户传入
                                        "timeStamp": param.timeStamp,         //时间戳，自1970年以来的秒数
                                        "nonceStr": param.nonceStr, //随机串
                                        "package": param.package,
                                        "signType": "MD5",         //微信签名方式：
                                        "paySign": param.paySign //微信签名
                                    },
                                    function (res) {
                                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                                            // 使用以上方式判断前端返回,微信团队郑重提示：
                                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                            window.location.href = "/event${eventId}/success.html"
                                        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                            alert("取消支付")
                                            let outTradeNo = param.outTradeNo;
                                            $.ajax({
                                                url: "/participant/wxpay/cancelOrder?out_trade_no=" + outTradeNo,
                                                method: "post",
                                                dataType: "json",
                                                async: false,
                                                contentType: "application/json",
                                                success: function (r) {
                                                    if (r.status === 1) {
                                                        alert("取消支付成功")
                                                        window.location.href = "/event${eventId}/failed.html"
                                                    } else {
                                                        alert(r.msg)
                                                    }
                                                }
                                            })
                                        }
                                        else if (res.err_msg == "get_brand_wcpay_request:fail") {
                                            alert("支付失败")
                                            window.location.href = "/event${eventId}/failed.html"
                                        }
                                    }
                            );
                        }

                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                        } else {
                            onBridgeReady();
                        }
                    }
                    else {
                        window.location.href = "/event${eventId}/failed.html"
                    }
                }
            })
        }



    })

</script>

</body>

</html>
